<template>
	<div id="register">
		
		<div id="div_register">
			<form id="register_form" method="post" >
				<div class = "first_step" ref= "first_step">
					<div class="r_input">
						<label for="username_r">用户名:</label>
						<input type="text" id="username_r" name="username" @blur="username_r" v-model="username" class="form-control" />
						<p v-cloak :style="span_style.username">{{info.username}}</p>
					</div>
					<div class="r_input"> <label for="password_r">输入密码:</label>
						<input type="password" name="password" id="password_r" @keyup="password_s" v-model="password1" class="form-control" />
						<p v-cloak :style="span_style.password">{{info.password1}}</p>
					</div>
					<div class="r_input">
						<label>密码强度：</label>
						<div id="strengthLevel" >
							<div :class="strengthLevel"></div>
						</div>
					</div>
					<div class="r_input"> <label for="password_r2">再次输入:</label>
						<input type="password" name="password" id="password_r2 " @blur="p_equal" v-model="password2" class="form-control" />
						<p v-cloak :style="span_style.password2">{{info.password2}}</p>
					</div>
					<button class= "r_sumbit" @click.prevent="thenStep">下一步</button>
				</div>
				
				<div class = "second_step" ref="second_step" style="display: none;">
					
					<div class="r_input"><label for="name">昵称:</label>
						<input type="text" name="name" id="name" v-model="r.name" @blur="name_r" class="form-control" />
					</div>
					<div class="r_input"><label for="question">出生年月:</label>
						<input type="date" name="answer" id="question" placeholder="你的生日是？" v-model="r.answer" @blur="answer_r" class="form-control" />
						<p v-cloak :style="span_style.answer"></p>
					</div>
					
					
					<div class="r_input"><label for="mail">邮箱:</label>
						<input type="text" id="mail" name="mail" v-model="r.mail" @blur="mail_r" class="form-control" />
					</div>
					<button class= "r_sumbit" @click.prevent="beforeStep" style="transform: translateX(-120%);">上一步</button>
					<input type="submit" value="确定" class="r_sumbit" style="transform: translateX(20%);" @click.prevent="register_on"/>
				</div>

			</form>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				reg: {},
				// 存放着注册信息
				r: {

				},
				//临时存放用户名
				
				username: ''
				,
				// 临时存放两次输入的密码
				password1: '',
				password2: '',
				// 注册提示info
				info: {
					username: '用户名不能小于6位',
					password1: '密码不能小于6位',
					password2: '',
					answer: '出生年月'
				},
				// info提示的样式
				span_style: {
					username: 'color:#2c3e50',
					password: 'color:#2c3e50',
					answer: 'color:#2c3e50',
					password2: 'color:red'
				},
				// 密码强度的class
				strengthLevel: 'strengthLevel0',
				// button
				button_style: '',
				// 判断每个input是否填写完毕
				sure: {
					input1: false,
					input2: false,
					input3: false,
					input4: true,
					input5: false,
					input6: true
				},
				blur: '',


			}
		},
		methods: {
			// 用户名
			username_r() {
				if (this.username.length >= 6) {
					this.$axios.post('/api/user/username',{username:this.username},{
						emulateJSON:true
					}
					)
					.then((data)=>{
						if(data.data == 'has') {
							this.info.username = "用户名已存在";
							this.span_style.username = 'color:red';
							this.sure.input1 = false;
						} 
						if(data.data == 'no') {
							this.info.username = '✔';
							this.span_style.username = 'color:green';
							this.r.username = this.username;
							this.sure.input1 = true;
						}
						})
					.catch((err)=>{
							console.log(err);
						
						})
							
						
				} else {
					this.info.username = '用户名不能小于6位';
					this.span_style.username = 'color:red';
					this.sure.input1 = false;
				}

			},
			// 密码
			password_s() {
				if (this.password1.length >= 6) {
					this.p_strong();
					this.info.password1 = '✔';
					this.span_style.password = 'color:green';
					this.sure.input2 = true;

				} else {
					this.info.password1 = "密码不能小于6位";
					this.span_style.password = 'color:red';
					this.strengthLevel = 'strengthLevel0';
					this.sure.input2 = false;
				}
			},
			// 判断两次输入密码相等
			p_equal() {
				if (this.password1 === '' & this.password2 === '')
					this.info.password2 = '';
				else if (this.password1 !== this.password2) {
					this.info.password2 = '两次密码不一致';
					this.span_style.password2 = 'color:red';
					this.sure.input3 = false;

				} else {
					this.info.password2 = '✔';
					this.r.password = this.password2;
					this.span_style.password2 = 'color:green';
					this.sure.input3 = true;

				}
			},
			// 判断密码强度
			p_strong() {
				if (/[0-9]/.test(this.password1)) {
					this.strengthLevel = 'strengthLevel1';
				}
				if (/[a-zA-Z]/.test(this.password1)) {
					this.strengthLevel = 'strengthLevel2';
				}
				if (/[^0-9a-zA-Z_]/.test(this.password1)) {
					this.strengthLevel = 'strengthLevel3';
				}
			},
			name_r() {
				this.sure.input4 = true;

			},
			// 问题答案
			answer_r() {
				if (this.r.answer !== '')
					this.sure.input5 = true;
				else
					this.sure.input5 = false;

			},
			mail_r() {
				this.sure.input6 = true;

			},
			register_on() {
				
				for(let i in this.sure){ //判断是否正确填写注册内容
					if(this.sure[i] == false){
						alert("请正确填写相应内容")
						return;
					}
				}
				this.$axios.post('/api/user/register',this.r)
				.then((data)=>{
					if(data.status == 200){
						alert('注册成功');
						this.$router.replace({
							path:'/login'
						});
					}
					
				}).catch((err)=>{
					alert('注册失败')
				})

			},
			thenStep(){
				this.$refs.first_step.style.display = "none";
				this.$refs.second_step.style.display = "";
				
			},
			beforeStep(){
				this.$refs.first_step.style.display = "";
				this.$refs.second_step.style.display = "none";
			}
				

		}

	}
</script>

<style lang="less" scoped> 
	button:focus,input:focus{
		box-shadow: none;
		outline: lightblue solid 2px;
	}
	#register {
		position: relative;
		width: 100%;
		top: 72px;
		height: 100%;
		

	#div_register{
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;
		
		#register_form {
			position: absolute;
			width: 100%;
			height: 100%;

			.r_input {
				width: 400px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				
				&:nth-child(1){
					top:20px;
				}
				&:nth-child(2){
					top:80px;
				}
				&:nth-child(3){
					top:140px;
				}
				&:nth-child(4){
					top:200px;
				}
				

				/*no*/
				label {
					display: inline-block;
					width: 100px;
					/*no*/
					text-align: left;
					font-size: 16px;
					/*no*/
					height: 30px;
					/*no*/
					
				}
		
				input {
					
					width: 200px;
					height: 30px;
					font-size: 20px;
					border: 1px solid #ccc;
					line-height: 30px;
					
				}
		
				p {
					height: 16px;/*no*/
				}
			}
			.r_sumbit{
				width: 150px;
				height: 50px;
				
				font-size: 22px;
				
				line-height: 50px;
				
				border: 1px solid #f5f5f5;
				position: absolute;
				
				left: 50%;
				transform: translateX(-50%);
				top: 270px;
				
				
				color: #f5f5f5;
				background-color: #367cff;
			}
		}
	}
		

	}

	#strengthLevel {
		margin-top: 10px;

		display: inline-block;
		height: 20px;
		/*no*/
		
		border: #ccc solid 1px;
		width: 200px;/*no*/
		.strengthLevel0 {
			width: 180px;
		}
		.strengthLevel1 {
			height: 20px;/*no*/
			width: 60px;/*no*/
			background-color: red;
		}
		
		.strengthLevel2 {
			height: 20px;/*no*/
			width: 120px;/*no*/
			background-color: orange;
		}
		
		.strengthLevel3 {
			height: 20px;/*no*/
			width: 200px;/*no*/
			background-color: green;
		}
	}

	

	
</style>
